/*TILES*/
tiles = function(){ /*Insert your own tiles here*/

	/* HOME */

	// section 1
	tileTitleText(0,0,0,3,1,'#789600',
		'external:http://metro-webdesign.info',
		'Welcome',
		'<strong>Koulen</strong> is a software development agency located in Phnom Penh. The cornerstone of the Koulen is service delivery on time, on budget, and according to specification. Koulen develops custom software solutions based on a range of platforms and technologies, including Web Application (PHP/ASP.net MVC 4), Window Application, iOS, Android and Windows Mobile.',
		['','',''],'');

	tileImageSlider(0,3,0,2,1,'#e27080','what we do','img/thales/what-we-do.png',1,"<p class='white'>KOULEN provides high quality services of a wide range. We feature necessary and sufficient knowledge and experience in IT market based on the polished business models and refined methodologies.</p>",
		0.9,['what we do?','#e27080','top'],'');

	//section 2
	
	tileImageSlider(0,0,1,2,1,'#f8922e','Terms of service','img/thales/order-process.png',1,"<p class='white'>Get advantage of our flexible pricing and special discounts! Looking for a reliable web developer for a long term? Contact us to benefit from our special long-term cooperation conditions!</p>",0.9,['Order your project quickly and easily!','#f8922e','top'],'');
	tileImg(0,2,1,1,1,"#0970bd","Website","img/thales/website.png",1,1,['Website','#0970bd','top','We create simple, attractive, functional and thus profit-oriented web solution with full support life-cycle.',true],'');
	tileImg(0,3,1,1,1,"#0970bd","Software","img/thales/software.png",1,1,['Software','#0970bd','top','Custom mobile development for most popular mobile platforms, such as Apple iOS, Android, Windows Phone.',true],'');
	tileImg(0,4,1,1,1,"#0970bd","Mobile","img/thales/mobile.png",1,1,['Mobile','#0970bd','top','We develop and provide to the customer high-quality flexible customized software solutions.',true],'');


	// section 3
	tileLive(0,0,2,3,1,"#C33",
		"","&nbsp;Special Promotion!","","","","",3000,
		["You can start your website design from $150 with Koulen.",
		"Register free trial for our HR system based on web application.",
		"For launching new website:<br/>Logo design + Web design + Hosting = $350",
		"Koulen has been developed the shoping market online allow you create new company and perform your products there. For more detail <strong>www.ppshoppingcenter.com</strong>"],
		['','',''],"noClick");
	tileImageSlider(0,3,2,2,1,'#e27080','what we use','img/thales/what-we-use.png',1,"<p class='white'>KOULEN develops dynamic websites and apps using PHP/MySQL, .NET Framework, Java and mobile platforms with success. We strive to stay well-posted on related tools, techniques.</p>",
		0.9,['what we use?','#e27080','top'],'');
	
	/* SOLUTION */
	
	tileImg(1,0,0,2,1,"#555","Images 3","img/thales/business-app.png",1,2,['Custom business application','#789600','bottom','We provide the turnkey solutions to Small and Medium size enterprises to manage their clients, internal and external resources including tangible assets, financial resources, materials, and human resources...',true],'');
	tileImg(1,2,0,1,1,"#555","","img/thales/software-pack.png",1,1,['Product','#F90','top','Application products: HR, Inventory, Restuarant...',true],'noClick');
	tileSlideshow(1,3,0,2,3,"#555","",8000,true,"fadeslide",["img/thales/template/template1.png","img/thales/template/template2.png","img/thales/template/template1.png"],['','',''],'noClick');

	tileImg(1,0,1,1,1,"#555","","img/thales/financial-app.png",1,1,['Website design','#C33','bottom','Some description',true],'noClick');
	tileImg(1,1,1,2,1,"#555","","img/thales/inv-system.png",1,2,['Responsive web design','#C34','top','Some description',true],'noClick');
	
	tileImg(1,0,2,2,1,"#555","","img/thales/mobile-app.png",1,2,['Mobile application','#789600','top','Koulen team work is skilled in Mobile design and development including mobile sites (skins and templates) and mobile Apps (iOS and Android). ',true],'noClick');
	tileImg(1,2,2,1,1,"#555","","img/thales/mobile-opt.png",1,1,['Optimization','#F90','bottom','The people are spending on mobile devices so website optimize for mobile is importance',true],'noClick');
	
	/* SUPPORT */
	/*Fadeslide and fliphorizontal are effects, other options are 'fade','flipvertical'*/
	tileSlideshow(2,0,0,2,2,"","",5000,true,"fadeslide",["img/bg/img1.png","img/bg/img2.jpg","img/bg/img3.jpg"],['Slideshow','#789600','top', 'description' ,true],'');
	tileSlideshow(2,0,2,1,1,"","",2500,false,"fliphorizontal",["img/bg/img1.png","img/bg/img2.jpg","img/bg/img3.jpg"],['','',''],'noClick');
	
	tileCustom(2,1,2,1,1,"#BBB","#&home","<img src='img/arrows/arrowLeft.png' style='margin-top:42px;margin-left:52px;padding-bottom:15px;' height='41'><h4 class='align-center'>Go home</h4>",['','',''],'');

	/* GROUP ABOUT US*/
	tileImg(3,0,0,2,1,"#555","Images 3","img/thales/business-app.png",1,2,['Custom business application','#789600','bottom','We provide the turnkey solutions to Small and Medium size enterprises to manage their clients, internal and external resources including tangible assets, financial resources, materials, and human resources...',true],'');
	tileImg(3,0,0,1,1,"#555","","img/thales/software.png",1,1,['Product','#F90','top','Application products: HR, Inventory, Restuarant...',true],'noClick');
	
	tileImg(3,0,1,1,1,"#555","","img/thales/financial-app.png",1,1,['Website design','#C33','bottom','Some description',true],'noClick');
	tileImg(3,1,1,2,1,"#555","","img/thales/inv-system.png",1,2,['Responsive web design','#C34','top','Some description',true],'noClick');
	
	tileImg(3,0,2,2,1,"#555","","img/thales/mobile-app.png",1,2,['Mobile application','#789600','top','Koulen team work is skilled in Mobile design and development including mobile sites (skins and templates) and mobile Apps (iOS and Android). ',true],'noClick');
	tileImg(3,2,2,1,1,"#555","","img/thales/mobile-opt.png",1,1,['Optimization','#F90','bottom','The people are spending on mobile devices so website optimize for mobile is importance',true],'noClick');
	
	/* CHOOSE US */
	tileTitleText(4,0,0,5,3,'#fff',
			'',
			'<h4>Here below you can find reasons why customers choose KOULEN<h4>',
			'<div class="articleContainer" id="target" style="">It is not an easy task to find a trustworthy development company to cater for your business needs profoundly. So before you make your choice you are welcome to read the below information, which comprises main advantages of cooperation with KOULEN. We have gathered all significant issues in one place, so that it will be simpler for you to make the correct decision.<ul><li><strong>We are committed to high quality</strong><br/>We believe that the quality is the milestone of success, because it is the basis of company standing and the background of customer loyalty. Thus the product quality is achieved by means of quality assurance and continuous integration of testing. And high-quality service is delivered by experienced and skilled team. As distinct from our competition, we provide our customers with warranty on the software products delivered. The extensive warranty scope includes ensuring of bug-free product operation within the first months after delivery.</li><li><strong>Various forms of cooperation</strong>Depending on the customer needs and project requirements, we offer various cooperation forms. We can either provide all development services ourselves, or work in close collaboration with the remote development team. On customer’s request we can create a subproject, initiate a dedicated team, adopt team members and project roles in correspondence with current project requirements, involving part time and shared resources.</li><li><strong>We stick to time constraints and project requirements</strong>We work hard on reducing project timeframes using the advance management approaches and newest technologies. We ensure that every process runs at the optimal levels and gives the planned result.</li><li><strong>We deliver perfect solutions</strong>The solutions KOULEN designs are extremely sophisticated and feature rich, and provide unlimited management and advancement options. On the other hand, our products are destined to get popular, as their application relies on comprehensive layouts, easy menus and attractive features. Have a look at our portfolio and the list of our products.</li><li><strong>We provide excellent customer support</strong>In KOULEN we really understand that the product should be working for you 24/7. And in case a question on your side arises, our primary task is to immediately address the issue. Quick and operative resolution provision is what we can guarantee you.</li><li><strong>Security</strong>Security is an essential part of our corporate culture. We start caring about it before the development process is initiated by signing NDA. We ensure proper source code protection and business communication safety. Besides, we regularly check up server and software security.</li><li><strong>We feature affordable value</strong>When providing a project estimate we offer our customers low pricing of the product with no hidden extra costs. Unlike our competition, our prices are affordable and frank, and thus are highly appreciated by those companies who have already done business with us.</li><li><strong>We are agile</strong>Our agility allows solving any issue. Agile principles, practices and processes, logically integrated in development process, allow to attain the proper product quicker and easier. We use small releases, planning game, user story, simple design, refactoring and the similar.</li><li><strong>We are object-oriented</strong>We apply the principles of object-oriented design and keep in mind design patterns to create solutions that really work.</li><li><strong>We are familiar with embedded software development</strong>We understand that embedded software development is complicated enough and requires particular approaches: special embedded tools, respective environments and techniques, and certainly new programming principles.</li></ul></div>',
			['','',''],'noClick');


	/* CONTACT US */
	/*
<iframe src="http://maps.google.com/maps/ms?ie=UTF8&amp;msa=0&amp;msid=206121199845276681176.0004d8f3fe4fde688e5f7&amp;output=embed&amp;output=embed" title="Koulen Development Agency" width="430" height="400" frameborder="0" class="map_embed" scrolling="no"></iframe>
	*/
	tileTitleText(5,0,0,3,3,'#fff',
		'',
		'<h4>Map of Koulen<h4>',
		'<iframe src="https://maps.google.com/maps/ms?ie=UTF8&amp;msa=0&amp;msid=206121199845276681176.0004d8f3fe4fde688e5f7&amp;output=embed&amp;output=embed" title="Koulen Development Agency" width="430" height="380" frameborder="1" style="border:1px solid #dadada;" class="map_embed" scrolling="no"></iframe>',
		['','#000',''],'noClick');

	tileImg(5,3,0,2,3,"#fff","Mobile","img/thales/contact.png",2,2,['Mobile','#fff','top','',true],'noClick');
}


/*Tile Templates */
tileTitleText = function(group,x,y,width,height,bg,linkPage,title,text,labelSettings,optClass){ /* Tile with only a title and description */	
	if(labelSettings!='' && labelSettings[0] != ''){
		var label=labelSettings[0];
		var labelcolor=labelSettings[1];
		var labelposition=labelSettings[2];
		if(labelposition=='top'){
			var labelText ="<div class='tileLabelWrapper top' style='border-top-color:"+labelcolor+";'><div class='tileLabel top' >"+label+"</div></div>";
		}else{
			var labelText ="<div class='tileLabelWrapper bottom'><div class='tileLabel bottom' style='border-bottom-color:"+labelcolor+";'>"+label+"</div></div>";
		}
	}else{
		labelText='';
	}
	$page.content += (
	"<a "+makeLink(linkPage)+" class='tile group"+group+" "+optClass+"' style=' \
	margin-top:"+((y*$tile.scalespacing)+45)+"px; margin-left:"+(x*$tile.scalespacing+group*$group.spacing)+"px; \
	width: "+(width*$tile.scalespacing-$tile.spacing)+"px; height:"+(height*$tile.scalespacing-$tile.spacing)+"px; \
	background:"+bg+";'>\
	<div class='tileTitle'>"+title+"</div>\
	<div class='tileDesc'>"+text+"</div>\
	"+labelText+"\
	</a>");
}
tileImg = function(group,x,y,width,height,bg,linkPage,img,imgSizeWidth,imgSizeHeight,labelSettings,optClass){
	if(labelSettings!='' && labelSettings[0] != ''){
		var id= "tileimg_"+(group+''+x+''+y).replace(/\./g,'_')
		var label=labelSettings[0];
		var labelcolor=labelSettings[1];
		var labelposition=labelSettings[2];
		var desc=labelSettings[3];
		var showDescOnHover=labelSettings[4];		
		var displayLabel = (showDescOnHover) ? " showOnHover": ""; 
		var labelDescText = (desc!='') ? "<div class='tileLabelDesc "+displayLabel+"'>"+desc+"</div>" : '';	
		if(labelposition=='top'){
			var totalLabel ="<div class='tileLabelWrapper top' style='border-top-color:"+labelcolor+";'><div class='tileLabel top' >"+label+"</div>"+labelDescText+"</div>";
		}else{
			
			var totalLabel ="<div class='tileLabelWrapper bottom'><div class='tileLabel bottom' style='border-bottom-color:"+labelcolor+";'>"+label+"</div>"+labelDescText+"</div>";
		}		
		$(function(){
			$.plugin($afterTilesAppend,{
				tileImg:function(){
					var id2 = id;
					if(labelposition=='top'){
						$("."+id2).bind("mouseenter",function(){$(this).find("div.showOnHover").show(200);});
						$("."+id2).bind("mouseleave",function(){$(this).find("div.showOnHover").stop().hide(200);});
					}else{
						$("."+id2).bind("mouseenter",function(){$(this).find("div.showOnHover").css("bottom",0).slideDown(200);});
						$("."+id2).bind("mouseleave",function(){$(this).find("div.showOnHover").css("top",0).stop().slideUp(200);});	
					}
				}
			});
		});
	}else{
		var id="";
		var totalLabel = "";
	}
	var drawHeight = (imgSizeWidth*$tile.scalespacing-$tile.spacing)
	var drawWidth = (imgSizeHeight*$tile.scalespacing-$tile.spacing)
	var tileHeight = (height*$tile.scalespacing-$tile.spacing)
	var tileWidth = (width*$tile.scalespacing-$tile.spacing)
	$page.content += ("<a "+makeLink(linkPage)+" class='tile tileImg group"+group+" "+id+" "+optClass+"' style=' \
	margin-top:"+((y*$tile.scalespacing)+45)+"px ;margin-left:"+(x*$tile.scalespacing+group*$group.spacing)+"px; \
	width: "+tileWidth+"px; height:"+tileHeight+"px; \
	background:"+bg+";'>\
	<img src='"+img+"' width="+drawWidth+" height="+drawHeight+" \
	style='margin-left: "+((tileWidth-drawWidth)*0.5)+"px; \
	margin-top: "+((tileHeight-drawHeight)*0.5)+"px'/>\
	"+totalLabel+"\
	</a>");
}

tileTitleTextImage = function(group,x,y,width,height,bg,linkPage,title,text,img,imgSize,imgToTop,imgToLeft,labelSettings,optClass){ // Tile with an image on the left side, a title, and a description, width is always 2
	if(labelSettings!='' && labelSettings[0] != ''){
		var label=labelSettings[0];
		var labelcolor=labelSettings[1];
		var labelposition=labelSettings[2];
		if(labelposition=='top'){
			var labelText ="<div class='tileLabelWrapper top' style='border-top-color:"+labelcolor+";'><div class='tileLabel top' >"+label+"</div></div>";
		}else{
			var labelText ="<div class='tileLabelWrapper bottom'><div class='tileLabel bottom' style='border-bottom-color:"+labelcolor+";'>"+label+"</div></div>";
		}
	}else{
		labelText='';
	}
	$page.content += (
	"<a "+makeLink(linkPage)+" class='tile group"+group+" "+optClass+"' style=' \
	margin-top:"+((y*$tile.scalespacing)+45)+"px;margin-left:"+(x*$tile.scalespacing+group*$group.spacing)+"px; \
	width: "+(width*$tile.scalespacing-$tile.spacing)+"px; height:"+(height*$tile.scalespacing-$tile.spacing)+"px; \
	background:"+bg+";'>\
	<img style='float:left; margin-top:"+imgToTop+"px;margin-left:"+imgToLeft+"px;' src='"+img+"' height="+imgSize+" width="+imgSize+"/> \
	<div class='tileTitle' style='margin-left:"+(imgSize+5+imgToLeft)+"px;'>"+title+"</div>\
	<div class='tileDesc' style='margin-left:"+(imgSize+6+imgToLeft)+"px;'>"+text+"</div>\
	"+labelText+"\
	</a>");
}
tileLive = function(group,x,y,width,height,bg,linkPage,title,img,imgSize,imgToTop,imgToLeft,speed,textArray,labelSettings,optClass){
	if(labelSettings!='' && labelSettings[0] != ''){
		var label=labelSettings[0];
		var labelcolor=labelSettings[1];
		var labelposition=labelSettings[2];
		if(labelposition=='top'){
			var labelText ="<div class='tileLabelWrapper top' style='border-top-color:"+labelcolor+";'><div class='tileLabel top' >"+label+"</div></div>";
		}else{
			var labelText ="<div class='tileLabelWrapper bottom'><div class='tileLabel bottom' style='border-bottom-color:"+labelcolor+";'>"+label+"</div></div>";
		}
	}else{
		labelText='';
	}
	var id= "livetile_"+(group+''+x+''+y).replace(/\./g,'_')
	if(img!=''){
		imgInsert = "<img style='float:left; margin-top:"+imgToTop+"px;margin-left:"+imgToLeft+"px;' src='"+img+"' height="+imgSize+" width="+imgSize+"/>"
	}else{
		imgInsert = '';
		imgSize = 0;
		imgToLeft = 0;
	}
	$page.content += (
	"<a "+makeLink(linkPage)+" class='tile group"+group+" "+optClass+"' style=' \
	margin-top:"+((y*$tile.scalespacing)+45)+"px; margin-left:"+(x*$tile.scalespacing+group*$group.spacing)+"px; \
	width: "+(width*$tile.scalespacing-$tile.spacing)+"px; height:"+(height*$tile.scalespacing-$tile.spacing)+"px; \
	background:"+bg+";'>\
	"+imgInsert+"\
	<div class='tileTitle' style='margin-left:"+(imgSize+5+imgToLeft)+"px;'>"+title+"</div>\
	<div class='livetile' style='margin-left:"+(imgSize+10+imgToLeft)+"px;' id='"+id+"' >"+textArray[0]+"</div>\
	"+labelText+"\
	</a>");
	setTimeout(function(){newLiveTile(id,group,textArray,speed,0)},speed); // init this tile
}
tileImageSlider = function(group,x,y,width,height,bg,linkPage,img,imgsize, text,slideDistance,labelSettings,optClass){
	if(labelSettings!='' && labelSettings[0] != ''){
		var label=labelSettings[0];
		var labelcolor=labelSettings[1];
		var labelposition=labelSettings[2];
		if(labelposition=='top'){
			var labelText ="<div class='tileLabelWrapper top' style='border-top-color:"+labelcolor+";'><div class='tileLabel top' >"+label+"</div></div>";
		}else{
			var labelText ="<div class='tileLabelWrapper bottom'><div class='tileLabel bottom' style='border-bottom-color:"+labelcolor+";'>"+label+"</div></div>";
		}
	}else{
		labelText='';
	}
	tileWidth = width*$tile.scalespacing-$tile.spacing
	tileHeight = height*$tile.scalespacing-$tile.spacing
	$page.content += ("<a "+makeLink(linkPage)+" class='tile group"+group+" "+optClass+" tileImageSlider' id='"+slideDistance+" ' style=' \
	margin-top:"+((y*$tile.scalespacing)+45)+"px;margin-left:"+(x*$tile.scalespacing+group*$group.spacing)+"px; \
	width: "+tileWidth+"px; height:"+tileHeight+"px; \
	background:"+bg+"; text-align:center;'>\
	<div class='tileImageSliderWrapper' style='position:absolute;'>\
	<div style='width: "+tileWidth+"px; height:"+tileHeight+"px;'>\
	<img src='"+img+"' height="+tileHeight*imgsize+" style='margin-top: "+((tileHeight-tileHeight*imgsize)*0.5)+"px'/>\
	</div>\
	<div text='tileImageSliderText'>"+text+"</div>\
	"+labelText+"\
	</div>\
	</a>");
	$(document).on("mouseover",'.tileImageSlider',function(){
		$(this).find(".tileImageSliderWrapper").stop(true,false).animate({"margin-top":-$(this).height()*$(this).attr("id")},250,"linear");
	}).on("mouseleave",'.tileImageSlider',function(){
		$(this).find(".tileImageSliderWrapper").stop(true,false).animate({'margin-top':0},300,"linear");
	});
}
tileCustom = function(group,x,y,width,height,bg,linkPage,content,labelSettings,optClass){ // make your own tiles
	if(labelSettings!='' && labelSettings[0] != ''){
		var label=labelSettings[0];
		var labelcolor=labelSettings[1];
		var labelposition=labelSettings[2];
		if(labelposition=='top'){
			var labelText ="<div class='tileLabelWrapper top' style='border-top-color:"+labelcolor+";'><div class='tileLabel top' >"+label+"</div></div>";
		}else{
			var labelText ="<div class='tileLabelWrapper bottom'><div class='tileLabel bottom' style='border-bottom-color:"+labelcolor+";'>"+label+"</div></div>";
		}
	}else{
		labelText='';
	}
	$page.content += (
	"<a "+makeLink(linkPage)+" class='tile group"+group+" "+optClass+"' style=' \
	margin-top:"+((y*$tile.scalespacing)+45)+"px;margin-left:"+(x*$tile.scalespacing+group*$group.spacing)+"px; \
	width: "+(width*$tile.scalespacing-$tile.spacing)+"px; height:"+(height*$tile.scalespacing-$tile.spacing)+"px; \
	background:"+bg+";'>\
	"+content+"\
	"+labelText+"\
	</a>");
}